<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 迈浪心理</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="register.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <header class="header">
            <div class="logo">
                <svg width="160" height="40" viewBox="0 0 160 40">
                    <path d="M20 5 C15 15, 10 25, 5 35 S25 35, 30 25 S35 15, 40 5" fill="none" stroke="#4a90e2"
                        stroke-width="2" />
                    <text x="45" y="28" font-family="Microsoft YaHei" font-size="24" fill="#333">迈浪心理</text>
                </svg>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-item">网站首页</a>
                <a href="consultation.html" class="nav-item">心理咨询</a>
                <a href="therapist.html" class="nav-item">心理咨询师</a>
                <a href="about.html" class="nav-item">关于我们</a>
                <a href="user-center.html" class="nav-item">个人中心</a>
                <a href="login.html" class="nav-item login-btn">登录</a>
            </nav>
        </header>

        <main class="register-main">
            <div class="register-container">
                <h2>注册账号</h2>
                <div class="register-type">
                    <button class="type-btn" :class="{ active: userType === 'client' }" @click="setUserType('client')">
                        <span class="type-icon">👤</span>
                        <span class="type-text">我是咨询者</span>
                    </button>
                    <button class="type-btn" :class="{ active: userType === 'therapist' }"
                        @click="setUserType('therapist')">
                        <span class="type-icon">👨‍⚕️</span>
                        <span class="type-text">我是咨询师</span>
                    </button>
                </div>

                <div class="register-form">
                    <form @submit.prevent="handleRegister">
                        <div class="form-group">
                            <label>手机号码</label>
                            <input type="tel" v-model="registerForm.phone" placeholder="请输入手机号码">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <div class="password-input">
                                <input :type="showPassword ? 'text' : 'password'" v-model="registerForm.password"
                                    placeholder="请设置6-20位密码">
                                <button type="button" class="toggle-password" @click="togglePasswordVisibility">
                                    <svg class="eye-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path v-if="!showPassword" d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z">
                                        </path>
                                        <circle v-if="!showPassword" cx="12" cy="12" r="3"></circle>
                                        <path v-if="showPassword"
                                            d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24">
                                        </path>
                                        <line v-if="showPassword" x1="1" y1="1" x2="23" y2="23"></line>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>确认密码</label>
                            <div class="password-input">
                                <input :type="showPassword ? 'text' : 'password'" v-model="registerForm.confirmPassword"
                                    placeholder="请再次输入密码">
                                <button type="button" class="toggle-password" @click="togglePasswordVisibility">
                                    <svg class="eye-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path v-if="!showPassword" d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z">
                                        </path>
                                        <circle v-if="!showPassword" cx="12" cy="12" r="3"></circle>
                                        <path v-if="showPassword"
                                            d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24">
                                        </path>
                                        <line v-if="showPassword" x1="1" y1="1" x2="23" y2="23"></line>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>姓名</label>
                            <input type="text" v-model="registerForm.name" placeholder="请输入真实姓名">
                        </div>
                        <div class="agreement">
                            <label class="checkbox-label">
                                <input type="checkbox" v-model="registerForm.agreement">
                                <span>我阅读并同意</span>
                            </label>
                            <a href="#" class="agreement-link">《用户协议》</a>和
                            <a href="#" class="agreement-link">《隐私政策》</a>
                        </div>
                        <button type="submit" class="register-btn" :disabled="loading">
                            {{ loading ? '注册中...' : '注册' }}
                        </button>
                        <div class="login-link">
                            已有账号？<a href="login.html">立即登录</a>
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </div>
    <script src="js/register.js"></script>
</body>

</html>